<template>
  <div style="display: flex">
    <category-panel title="分类" icon="tree" request="articleCategory" @delClick="delClick" @notClick="notClick"
                    @nodeClick="nodeClick"></category-panel>
    <el-container>
      <el-header>
        <div class="report_header" ref="headerHeight">
          <div class="report_header_left"></div>
          <div style="display: flex;flex-direction: row;justify-content:space-between;width: 100%;">
            <div style="display: flex;flex-direction: row;flex-wrap: wrap;overflow: hidden;height:41px">
              <div class="report_header_query">
                <el-input prefix-icon="el-icon-search" placeholder="标题" v-model="query.title"></el-input>
              </div>
            </div>
            <div>
            <el-button style="margin-left: 10px;margin-top: 5px;" size="small" type="primary" @click="queryClick" v-permission="['article.query']">查询</el-button>
            <el-button style="margin-left: 10px;margin-top: 5px;" size="small" type="primary" @click="addClick" v-permission="['article.add']">新增</el-button>
            </div>
          </div>
        </div>
      </el-header>
      <div class="pd10">
        <el-table :data="articleData" border stripe :height="curHeight" v-loadMore="[payLoads,'article-list']" ref="table" style="width: 100%;">
          <el-table-column
            type="index"
            width="50"
            align="center"
            fixed
          >
          </el-table-column>
          <el-table-column label="缩略图" width="72">
            <template slot-scope="{row}">
              <img :src="row.thumbnail" style="width: 50px; height: 50px; vertical-align:middle; overflow: hidden;"></img>
            </template>
          </el-table-column>
          <el-table-column
            label="标题"
            align="left"
            :show-overflow-tooltip="text_overflow"
            prop="title"
          >
          </el-table-column>

          <el-table-column
            label="分类"
            width="150"
            align="left"
            :show-overflow-tooltip="text_overflow"
            prop="articleCategoryName"
          >
          </el-table-column>
          <el-table-column
            label="排序"
            align="center"
            width="100"
            prop="orders"
          >
            <template slot-scope="scope">
              <el-input v-model="scope.row.orders" @blur="bulrOrders(scope.row)"></el-input>
            </template>
          </el-table-column>

          <el-table-column
            label="点击数"
            align="center"
            width="100"
            prop="hits"
          >
          </el-table-column>

          <el-table-column label="操作" align="center" width="150">
            <template slot-scope="scope">
              <div>
                <el-tooltip  class="item" effect="dark" v-permission="['article.edit']" content="编辑" v-show="deleted == false" placement="top-start">
                  <a @click="editClick(scope.row)">
                    <i style="color: #409EFF" class="el-icon-edit"></i>
                  </a>
                </el-tooltip>
                <el-tooltip class="item"  effect="dark" v-permission="['article.del']" content="恢复" v-show="deleted == true" placement="top-start">
                  <a style="margin-left: 10px" @click="restoreArticle(scope.row)">
                    <i style="color: #E6A23C" class="el-icon-refresh-right"></i>
                  </a>
                </el-tooltip>
                <el-tooltip class="item"  effect="dark" v-permission="['article.del']" content="删除" v-show="deleted == false" placement="top-start">
                  <a style="margin-left: 10px" @click="deleteArticle(scope.row)">
                    <i style="color: #F56C6C" class="el-icon-delete"></i>
                  </a>
                </el-tooltip>
<!--                <el-tooltip v-permission="['article.edit']" class="item" effect="dark" content="编辑" v-show="deleted == false" placement="top-start">-->
<!--                  <a @click="editClick(scope.row)">-->
<!--                    <i style="color: #409EFF" class="el-icon-edit"></i>-->
<!--                  </a>-->
<!--                </el-tooltip>-->
<!--                <el-tooltip class="item" v-permission="['article.del']" effect="dark" content="恢复" v-show="deleted == true" placement="top-start">-->
<!--                  <a style="margin-left: 10px" @click="restoreArticle(scope.row)">-->
<!--                    <i style="color: #E6A23C" class="el-icon-refresh-right"></i>-->
<!--                  </a>-->
<!--                </el-tooltip>-->
<!--                <el-tooltip class="item" v-permission="['article.del']" effect="dark" content="删除" v-show="deleted == false" placement="top-start">-->
<!--                  <a style="margin-left: 10px" @click="deleteArticle(scope.row)">-->
<!--                    <i style="color: #F56C6C" class="el-icon-delete"></i>-->
<!--                  </a>-->
<!--                </el-tooltip>-->
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-footer class="el-footerBox">
        <pagination v-show="total>0" :total="total" :page.sync="pageNum" :limit.sync="pageSize"
                    @pagination="loadArticle"></pagination>
      </el-footer>
    </el-container>
  </div>
</template>
<script>
  import permission from '@/directive/permission/index.js' // 权限判断指令
  import {mapGetters} from 'vuex';
  import {list, del, update,updateArticle} from '@/api/article'
  import utils from '../../utils/utils.js'
  import {EventBus} from '@/api/eventBus'
  import Pagination from '@/components/Pagination';
  import CategoryPanel from '@/components/CategoryPanel';
  import loadMore from '@/utils/loadMore.js'
  export default {
    name: 'article-list',
    directives: { permission,loadMore },
    data() {
      return {
        articleData: [],
        pageNum: 1,
        pageSize: 20,
        total: 0,
        queryType: true,
        query: {
          title: '',
        },
        keyword: {
          title: '',
        },
        curHeight: null,
        excelData: [],
        articleCategoryId: '',
        deleted: false,
        stateForm: {
          id: '',
          published: 1
        },
        restoreForm: {
          id: '',
          deleted: false,
        },
        text_overflow:false,
        payLoads:'',
        sorting: {
          id: '',
          orders: ''
        },
      }
    },
    components: {Pagination, CategoryPanel},
    created() {
      var _this = this;
      this.loadArticle();
      EventBus.$on('article-add', res => { // 监听新增完毕
        // 更新列表数组
        _this.articleData.splice(0, 0, res)
      });
      EventBus.$on('article-edit', res => { // 监听新增完毕
        // 更新列表数组
        for (var i = 0; i < _this.articleData.length; i++) {
          if (_this.articleData[i].id == res.id) {
            _this.articleData[i] = res
          }
        }
      })
    },
    activated() {
      this.payLoads = new Date().getTime();
    },
    computed: {
      ...mapGetters([
        'mchId'
      ])
    },
    mounted() {
      this.comeIn()
      this.beforeMount()
    },
    filters: {
      watchStatus(val) {
        if (val == 0) {
          return '已创建'
        } else if (val == 1) {
          return '已上架'
        } else if (val == 2) {
          return '已下架'
        }
      },
      watchShare(val) {
        if (!val) {
          return '禁用分享解锁'
        } else if (val) {
          return '启用分享解锁'
        }
      }
    },
    methods: {
      beforeMount() {
        var _this = this
        window.onresize = () => {
          return (() => {
            if (this.queryType == false) {
              var h = document.documentElement.clientHeight || document.body.clientHeight;
              _this.curHeight = h - 266//减去页面上固定高度height
            } else {
              var h = document.documentElement.clientHeight || document.body.clientHeight;
              _this.curHeight = h - 220//减去页面上固定高度height
            }
          })();
        };
      },
      comeIn(){
        console.log('222')
        var h = document.documentElement.clientHeight || document.body.clientHeight;
        this.curHeight = h - 220//减去页面上固定高度height
      },
      editClick(row) {
        this.$router.push({
          path: '/article/edit', query: {id: row.id}
        })
      },
      loadArticle() {
        var _this = this
        let params = new URLSearchParams();
        params.append('pageNum', _this.pageNum);
        params.append('pageSize', _this.pageSize);
        params.append('title',_this.keyword.title);
        params.append('articleCategoryId', _this.articleCategoryId);
        params.append('deleted', _this.deleted);
        list(params).then(response => {
          console.log(response)
          _this.articleData = response.data.data
          _this.total = response.data.total
        }).catch(error => {
          console.log('error!!')
        });
      },

      chooseClick() {
        this.queryType = !this.queryType
        if (this.queryType == false) {
          var h = document.documentElement.clientHeight || document.body.clientHeight;
          this.curHeight = h - 266//减去页面上固定高度height
        } else {
          var h = document.documentElement.clientHeight || document.body.clientHeight;
          this.curHeight = h - 220//减去页面上固定高度height
        }
      },
      addClick() {
        this.$router.push({
          path: '/article/add'
        })
      },
      deleteArticle(data) {
        console.log(data)
        var _this = this
        this.$confirm('确认删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          del(data.id).then(response => {
            console.log(response)
            _this.articleData.forEach(function (item,index) {
              if (item.id == data.id){
                _this.articleData.splice(index,1)
              }
            });
            _this.$message({
              message: response.content,
              offset: 120,
              center: true
            });
          }).catch(error => {
            console.log('error!!')
          });
        }).catch(() => {
        });
      },
      queryClick() {
        this.keyword = this.query;
        this.pageNum = 1
        this.loadArticle()
      },
      resetClick() {
        this.query.title = '';
        this.keyword = this.query;
        this.pageNum = 1;
        this.loadArticle()
      },
      formatJson(filterVal, jsonData) {
        return jsonData.map(v => filterVal.map(j => v[j]));
      },
      notClick() {
        this.articleCategoryId = 0;
        this.deleted = false;
        this.loadArticle()
      },
      delClick() {
        this.deleted = true;
        this.articleCategoryId = '';
        this.loadArticle()
      },
      nodeClick(data) {
        this.deleted = false;
        this.articleCategoryId = data.id;
        this.loadArticle()
      },
      restoreArticle(row) {
        var _this = this
        console.log(row);
        this.$confirm('确认恢复?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.restoreForm.id = row.id;
          update(_this.restoreForm).then(response => {
            console.log(response);
            _this.articleData.forEach(function(item, index) {
              if (item.id == row.id) {
                _this.articleData.splice(index, 1)
              }
            })
            _this.$message({
              message: response.content,
              offset: 120,
              center: true
            });
          }).catch(error => {
            console.log('error!!')
          });
        }).catch(() => {
        });
      },
      bulrOrders(data) {
        console.log(data)
        this.sorting.id = data.id;
        this.sorting.orders = data.orders;
        this.saveSorting();
      },
      saveSorting() {
        var _this = this
        updateArticle(_this.sorting).then(response => {
          console.log(response)
          _this.articleData.forEach(function (item) {
            if (item.id == response.data.id) {
              item.orders = response.data.orders
            }
          });
          _this.$message({
            message: response.content,
            offset: 120,
            center: true
          });
        }).catch(error => {
          console.log('error!!')
        });
      },
    }
  }
</script>
<style scoped>
  .el-footerBox {
    height: 50px !important;
    line-height: 50px !important;
    border-top: 1px solid #f2f2f2;
  }
  .app {
    background-color: rgba(248, 248, 248, 0.8);
  }

  /deep/.el-header {
    padding: 10px;
    /* height: 100% !important; */
    padding-bottom: 0;
  }

  .report_header {
    width: 100%;
    min-height: 40px;
    box-sizing: border-box;
    background-color: rgba(248, 248, 248, 0.8);
    display: flex;
    align-items: center;
    padding-bottom: 5px;
    position: relative;
    padding-left: 5px;
    padding-right: 5px;
  }
  .report_header_left {
    width: 5px;
    height: 100%;
    background-color: #409EFF;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
  }
  .report_header_date {
    margin-left: 10px;
    width: 250px;
    margin-top: 5px;
  }
  .report_header_query {
    margin-left: 10px;
    width: 180px;
    margin-top: 5px;
  }
</style>
